<template>
    <div>
        <!-- 活动 -->
      <div v-for="item in actityDataList" :key="item.id" v-if="item.close_status == 1">
        <div class="content-box1" @click="openLink(item)">
            <van-row class="container-header" type="flex" justify="space-between" align="bottom">
                <van-col class="van-ellipsis">
                    <div class="content-title one-txt-cut">{{ item.active_title }}</div>
                    <div class="base" v-if="item.active_status<3">
                        <p class="base-text">报名时间：{{item.signup_start_time | formate_date}}-{{item.signup_end_time | formate_date}}</p>
                    </div>
                    <div class="base">
                        <p class="base-text" >活动时间：{{item.active_start_time | formate_date}}-{{item.active_end_time | formate_date}}</p>
                    </div>
                    <!-- <p class="content-middle" v-html="it.article_content"></p> -->
                </van-col>
                <van-col>
                    <div class="content-img" v-if="item.file_path">
                        <img :src="item.file_path" width="100%" alt>
                        <div class="btns" v-if="item.active_status==1" style="background-color: #01A0EF">
                            <!-- {{t_active[item.active_status - 1].name}} -->
                            <p>预热</p>
                        </div>
                        <div class="btns" v-if="item.active_status==2" style="background-color: #E6A23D" >
                            <p>报名中</p>
                        </div>
                        <div class="btns" v-if="item.active_status==3" style="background-color: #E6A23D" >
                            <p>待进行</p>
                        </div>
                        <div class="btns" v-if="item.active_status==4" style="background-color: #67C23A" >
                            <p>进行中</p>
                        </div>
                        <div class="btns" v-if="item.active_status==5" style="background-color: #DADADA" >
                            <p>已结束</p>
                        </div>
                    </div>
                </van-col>
            </van-row>
            <div class="content-middle">
            <van-row type="flex" justify="space-between">
                <van-col>
                <span>{{item.create_username}}</span>
                <span v-if="!item.top_status==0">
                    <van-tag type="primary">置顶</van-tag>
                </span>
                </van-col>
                <van-col>
                <i class="title-user">
                    <span class="iconfont icon-dianzan"></span>
                    <span>{{item.like_nums || 0}}</span>
                </i>
                <i class="title-user">
                    <span class="iconfont icon-xiaoxi"></span>
                    <span>{{item.comment_nums || 0}}</span>
                </i>
                </van-col>
            </van-row>
            </div>
        </div>
      </div>
      <!-- 社区 -->
      <div v-for="it in communityDataList" :key="it.id" v-if="it.close_status == 1">
          <div class="content-box" @click="go_detail(it)">
            <van-row type="flex" justify="space-between" align="center">
                <van-col>
                    <div class="header">
                    <div class="name">
                        <img :src="it.portrait?it.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'" alt class="photo" srcset>
                    </div>
                    <div class="date">
                        <p class="dateName" style="line-height:12px;">{{it.create_username}}</p>
                        <span class="dateTime">{{it.create_time}}</span>
                    </div>
                    </div>
                </van-col>
                <van-col>
                    <van-tag v-if="!it.top_status==0" type="primary">置顶</van-tag>
                    <!-- <div
                    v-if="!it.top_status==0"
                    class="stick"
                    style="line-height: 12px;  border: 1px solid #BCE4F9;"
                >
                    <i>置顶</i>
                    </div>-->
                </van-col>
            </van-row>
            <div class="title_topic" style="line-height:14px;">#{{it.articletype_name}}#</div>
            <van-row class="container-header" type="flex" justify="space-between" align="bottom" >
                <van-col class="van-ellipsis">
                    <div class="content-title one-txt-cut">{{ it.article_title }}</div>
                    <div class="dict_text">
                    <p style="line-height:14px;">{{it.article_content}}</p>
                    </div>
                </van-col>
                <van-col>
                    <div class="content-img" v-if="it.file_path">
                    <img :src="it.file_path" width="100%" alt>
                    </div>
                </van-col>
            </van-row>
            <div class="content-middle">
                <van-row type="flex" justify="space-between">
                    <van-col>
                    <!-- <span>{{it.create_username}}</span>
                                        <span v-if="!it.top_status==0">
                                            <van-tag type="primary">置顶</van-tag>
                    </span>-->
                    </van-col>
                    <van-col>
                    <i class="title-user">
                        <span class="iconfont icon-dianzan"></span>
                        <span>{{it.like_nums || 0}}</span>
                    </i>
                    <i class="title-user">
                        <span class="iconfont icon-xiaoxi"></span>
                        <span>{{it.comment_nums || 0}}</span>
                    </i>
                    </van-col>
                </van-row>
            </div>
        </div>
      </div>

    </div>
</template>
<script>
import { organization_listActityManager, organization_listCommunityManager, organization_listThirdPartyPage } from "@/api/organization";
import moment from "moment";
export default {
  name: "",
  data () {
    return {
        listQuery:{
             company_id: localStorage.getItem("companyId"),
             pageSet_id:  this.$route.query.id,
             organization_id:this.$route.query.organization_id
        },
        actityDataList:[],
        communityDataList:[],
        perId:""
    };
  },
   filters: {
        formate_date(v) {
        return moment(v).format("YYYY/MM/DD");
        }
    },
 methods: {
     async actityInitList(){
          let {data} = await organization_listActityManager(this.listQuery)
          if(data.status == 100){
              this.actityDataList = data.data.rows
              console.log(data,'活动')
          }
     },
     async CommunityInitList(){
          let {data} = await organization_listCommunityManager(this.listQuery)
          if(data.status == 100){
              console.log(data.data.rows,'社区')
              this.communityDataList = data.data.rows
              this.communityDataList.map(item => {
                let regex = /<[^<>]+>/g;
                console.log( item,' item.article_content')
                item.article_content = item.article_content.replace(regex, "");
        });
          }
     },
      async ThirdPartyInitList(){
          let {data} = await organization_listThirdPartyPage(this.listQuery)
          if(data.status == 100){
              console.log(data,'第三方链接')
          }
     },
    go_detail(it) {
      this.perId = it.id;
      this.$router.push({
        path: "/CommunityDetail",
        query: {
          id: it.article_id,
          name: "article"
        }
      });
    },
     openLink(e) {
      this.$router.push({
        path: "/ActivityDetail",
        query: { id: e.active_id, status: e.active_status, name: "home" }
      });
    },


 },
 created: function () {
     this.actityInitList();
     this.CommunityInitList();
     this.ThirdPartyInitList()


 }
}
</script>
<style lang="scss" scoped>
.content-box1 {
    padding:5px 15px;
    background-color: #fff;
    .content-title {
        min-width: 182px;
        // font-family: PingFangSC-Medium;
        font-size: 14px;
        // font-weight: 600;
        color: #3a3a3a;
    }
    .content-middle {
        color: #a0a0a0;
        font-size: 12px;
        line-height: 16px;
        padding: 5px 0 0;
    }
    .title-user {
        padding-left: 12px;
    }
    .content-img {
        width: 133px;
        // height: 75px;
        margin-left: 10px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        .btns {
            width: 44px;
            height: 20px;
            background: #01a0ef;
            border-radius: 2px;
            position: absolute;
            top: 0;
            left: 6px;
            text-align: center;
            color: #fff;
            p {
                font-size: 11px;
                line-height: 20px;
            }
        }
    }
}

.base {
    // padding-top: 10px;
    .base-text {
        font-size: 12px;
        color: #a0a0a0;
    }
}

.btn {
    font-size: 12px;
    text-align: center;
    padding: 4px 10px;
    color: #fff;
    background-image: linear-gradient(-213deg, #02cef8 0%, #01a0ef 100%);
    border-radius: 4px;
}

.lackyDraw {
    padding-bottom: 50px;
}

.content-box {
       padding:5px 15px;
    background-color: #fff;
    .content-title {
        min-width: 182px;
        color: #3a3a3a;
        font-size: 14px;
    }
    .content-middle {
        color: #a0a0a0;
        font-size: 12px;
        line-height: 16px;
        padding: 5px 0 0;
    }
    .title-user {
        padding-left: 2px;
    }
    .content-img {
        width: 133px;
        // height: 75px;
        margin-left: 10px;
        border-radius: 6px;
        overflow: hidden;
    }
}

.topic {
    // background: #fff;
    padding: 10px 0px 10px 10px;
    display: -webkit-box;
    overflow: scroll;
    .topic_list {
        padding-right: 10px;
        width: 50%;
        height: 60px;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
    }
}

.header {
    display: flex;
    .name {
        .photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }
    .date {
        margin-left: 10px;
        margin-top: 9px;
        .dateName {
            font-size: 13px;
        }
        .van-cell {
            line-height: 0 !important;
        }
        .dateTime {
            color: #a0a0a0;
            font-size: 11px;
        }
    }
}

.stick {
    font-size: 10px;
    padding: 0px 6px;
    color: #01a0ef;
    background: #ddf3fe;
    border-radius: 5px;
}

.icon-dianzan {
    font-size: 12px;
}

.icon-xiaoxi {
    font-size: 12px;
}

.title_topic {
    display: inline-flex;
    padding: 0px 9px;
    margin: 5px 0;
    background: #01a0ef;
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
}
</style>
